<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Auth Test</title>
  <style>
    body { font-family: sans-serif; padding: 20px; }
    input, button { margin: 5px 0; padding: 6px; width: 300px; }
    #output { margin-top: 20px; white-space: pre-wrap; color: green; }
  </style>
</head>
<body>
  <h2>Auth API 测试页面</h2>

  <h4>用户注册 / 登录</h4>
  <input type="text" id="userId" placeholder="用户名"><br>
  <input type="password" id="password" placeholder="密码"><br>
  <button onclick="register()">注册</button>
  <button onclick="login()">登录</button>

  <hr>

  <h4>获取授权码</h4>
  <input type="text" id="userIdAuth" placeholder="用户名"><br>
  <button onclick="getAuthorizationCode()">获取授权码</button>

  <h4>与第三方账号绑定</h4>
  <input type="text" id="brand" placeholder="品牌名 (xiaomi 或 midea)"><br>
  <input type="text" id="code" placeholder="授权码"><br>
  <button onclick="exchangeToken()">绑定</button>

  <h4>解绑第三方账号</h4>
  <input type="text" id="unbindBrand" placeholder="品牌名 (xiaomi 或 midea)"><br>
  <button onclick="unbind()">解绑</button>

  <h4>获取绑定状态</h4>
  <button onclick="getBindings()">获取绑定信息</button>

  <div id="output"></div>

  <script>
    const API_BASE = 'http://localhost:3000/auth';
    let accessToken = ''; // 登录后保存 token
    let refreshToken = '';

    async function register() {
      const userId = val('userId');
      const password = val('password');
      const res = await post('/register', { userId, password });
      show(res);
    }

    async function login() {
      const userId = val('userId');
      const password = val('password');
      const res = await post('/login', { userId, password });
      if (res?.data?.token) {
        accessToken = res.data.token;
        refreshToken = res.data.refreshToken;
      }
      show(res);
    }

    async function exchangeToken() {
      const brand = val('brand');
      const code = val('code');
      if (!accessToken) return alert('请先登录');

      const res = await authPost('/code', { brand, code });
      show(res);
    }

    async function unbind() {
      const brand = val('unbindBrand');
      if (!accessToken) return alert('请先登录');
      const res = await authPost('/unbind', { brand });
      show(res);
    }

    async function getBindings() {
      if (!accessToken) return alert('请先登录');
      const res = await fetch(API_BASE + '/bindings', {
        method: 'GET',
        headers: {
          'Authorization': 'Bearer ' + accessToken
        }
      }).then(res => res.json()).catch(err => ({ error: err.message }));
      show(res);
    }

    async function getAuthorizationCode() {
      const userId = val('userIdAuth');
      if (!userId) return alert('请填写用户名');
      const res = await post('/getAuthorizationCode', { userId });
      show(res);
    }

    async function post(path, data) {
      try {
        const res = await fetch(API_BASE + path, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(data)
        });
        return await res.json();
      } catch (err) {
        return { error: err.message };
      }
    }

    async function authPost(path, data) {
      try {
        const res = await fetch(API_BASE + path, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + accessToken
          },
          body: JSON.stringify(data)
        });
        return await res.json();
      } catch (err) {
        return { error: err.message };
      }
    }

    function val(id) {
      return document.getElementById(id).value.trim();
    }

    function show(res) {
      document.getElementById('output').textContent = JSON.stringify(res, null, 2);
    }
  </script>
</body>
</html>
